<script setup lang="ts">
import { VueDraggable } from 'vue-draggable-plus'
import ListIcon from '@iconify-icons/tabler/list'

import { SIconIconify } from '@xtail/vue3'

import type { DragSortListPropsType } from './types'

defineOptions({
  name: 'XDragSortList',
})

const { itemKey = () => 'id', handle = true } = defineProps<DragSortListPropsType>()

const modelValue = defineModel<Array<any>>({ default: () => [] })
</script>

<template>
  <div class="x-drag-sort-list">
    <n-list v-bind="{ clickable: true, hoverable: true, showDivider: false, ...(listProps ?? {}) }">
      <vue-draggable
        v-model="modelValue"
        v-bind="{
          ghostClass: 'x-drag-sort-list__item--ghost',
          handle: handle ? '.x-drag-sort-list__item__handle' : undefined,
          ...(dragOptions ?? {}),
        }"
      >
        <slot>
          <n-list-item v-for="(item, index) in modelValue" :key="itemKey(item, index)">
            <div class="x-drag-sort-list__item">
              <div v-if="handle" class="x-drag-sort-list__item__handle">
                <slot name="item-handle">
                  <div class="x-drag-sort-list__item__handle-icon-box">
                    <s-icon-iconify
                      class="x-drag-sort-list__item__handle-icon"
                      v-bind="{
                        icon: ListIcon,
                        width: 16,
                        height: 16,
                        ...(handleIconProps ?? {}),
                      }"
                    />
                  </div>
                </slot>
              </div>
              <div
                class="x-drag-sort-list__item__content"
                :class="[handle ? '' : 'x-drag-sort-list__item--no-handle__content']"
              >
                <slot name="item-content-wrapper" :item="item">
                  <div class="x-drag-sort-list__item__content-wrapper">
                    <slot name="item-content" :item="item"></slot>
                  </div>
                </slot>
              </div>
            </div>
          </n-list-item>
        </slot>
      </vue-draggable>
    </n-list>
  </div>
</template>

<style scoped lang="scss">
@use './style' as *;
</style>
